<!-- 我的设置项 -->
<template>
	<view class="mine-edit">
		<uniForms class="form">
			<formListItem class="item" :label="name + ':'" :label-width="74" :type="'text'" placeholder="请输入" :value.sync="value"></formListItem>
			<button class="btn btn-yellow save-btn" @click="save">保存</button>
		</uniForms>
	</view>
</template>

<script>
import uniForms from '@/components/uni-forms/uni-forms.vue';
import formListItem from '@/components/form-list-item/form-list-item.vue';
export default {
	components: {
		uniForms,
		formListItem
	},
	data() {
		return {
			name: '', //名字
			key: '', //键值
			value: '', //值
			userEditFrom: this.$store.state.userModule.userEditFrom
		};
	},
	methods: {
		save() {
			// 保存上传
			this.userEditFrom = {
				...this.userEditFrom,
				[this.key]: this.value
			};
			console.log('用户编辑值', this.userEditFrom);
			this.$store.dispatch('editUserInfo', this.userEditFrom).then(res => {
				
				setTimeout(()=>{
					uni.showToast({
						mask: true,
						icon: 'success',
						title: '编辑成功',
						duration: 2000
					});
				},500)
				
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					});
				}, 2000);
			});
		}
	},
	onLoad: function(option) {
		//option为object类型，会序列化上个页面传递的参数
		this.name = option.name;
		this.key = option.key;
		this.value = option.value;
		uni.setNavigationBarTitle({
			title: '设置' + option.name
		});
		console.log(option.name, option.key, option.value); //打印出上个页面传递的参数。
	}
};
</script>

<style lang="scss" scoped>
.mine-edit {
	width: 100%;

	.form {
		width: 100%;
		box-sizing: border-box;
		.item {
			width: 100%;
			padding: 8rpx 24rpx;
			background-color: #fff;
			box-sizing: border-box;
			display: flex;
			border-radius: 8px;
		}
		.save-btn {
			width: 100%;
			font-size: 30rpx;
			padding: 14rpx 0rpx;
			margin-top: 150rpx;
		}
	}
}
</style>
